<template>
    <text :class="['btn-txt',disabled ? 'btn-disabled' : 'btn-common']" @click="btnClick">
        <slot></slot>
    </text>
</template>

<style scoped>
    .btn-txt {
        height: 70px;
        line-height: 70px;
        justify-content: center;
        align-items: center;
        padding-left: 48px;
        padding-right: 48px;
        border-radius: 6px;
        font-size: 36px;
        color: #fff;
        font-family: msyhl;
    }
    .btn-common {
        background-color: #e31336;
    }
    .btn-disabled {
        background-color: #d8d8d8;
    }
</style>

<script>
    export default{
        props: {
            disabled: {
                type: Boolean,
                default: false,
                required: true
            }
        },
        data(){
            return{}
        },
        methods: {
            btnClick(e){
                if(this.disabled) return false;
                this.$emit("btnClick",e);
            }
        }
    }
</script>
